<template>
    <div class="new">
      <el-card>
<!--          <div style="margin: 25px 0;width: 100%;display: flex;flex-direction: row;justify-content: space-between">-->
<!--              <div style="display: flex;flex-direction: row;">-->
<!--                  <div>-->
<!--                      <label style="font-size: 16px;font-weight: 600">车库名称:</label>-->
<!--                      <el-select style="width: 150px;margin-left: 5px" value="" clearable>-->
<!--                          <el-option value="1" label="已读"></el-option>-->
<!--                          <el-option value="0" label="未读"></el-option>-->
<!--                      </el-select>-->
<!--                  </div>-->
<!--                  <div style="margin-left: 15px">-->
<!--                      <label style="font-size: 16px;font-weight: 600">用户名称:</label>-->
<!--                      <el-select style="width: 150px;margin-left: 5px" value="" clearable>-->
<!--                          <el-option value="1" label="已读"></el-option>-->
<!--                          <el-option value="0" label="未读"></el-option>-->
<!--                      </el-select>-->
<!--                  </div>-->
<!--                  <div style="margin-left: 15px">-->
<!--                      <label style="font-size: 16px;font-weight: 600">评论内容:</label>-->
<!--                      <el-input style="width: 300px;"></el-input>-->
<!--                  </div>-->
<!--              </div>-->
<!--              <div>-->
<!--                  <el-tooltip class="item" effect="dark" content="回复" placement="top">-->
<!--                      <el-button type="success" @click="replayComment" circle icon="el-icon-microphone"></el-button>-->
<!--                  </el-tooltip>-->
<!--                  <el-tooltip class="item" effect="dark" content="新增" placement="top">-->
<!--                      <el-button type="primary" @click="addComment" circle icon="el-icon-plus"></el-button>-->
<!--                  </el-tooltip>-->
<!--                  <el-tooltip class="item" effect="dark" content="删除" placement="top">-->
<!--                      <el-button type="danger" @click="deleteComment" circle icon="el-icon-delete"></el-button>-->
<!--                  </el-tooltip>-->
<!--                  <el-tooltip class="item" effect="dark" content="编辑" placement="top">-->
<!--                      <el-button type="info" @click="editComment" circle icon="el-icon-edit"></el-button>-->
<!--                  </el-tooltip>-->
<!--                  <el-tooltip class="item" effect="dark" content="查看" placement="top">-->
<!--                      <el-button type="warning" @click="showComment" circle icon="el-icon-search"></el-button>-->
<!--                  </el-tooltip>-->
<!--              </div>-->
<!--          </div>-->
          <el-table
                  :data="commentsList"
                  stripe
                  :show-overflow-tooltip=true
                  :header-cell-style="tableHeader"
                  ref="multipleTable"
                  tooltip-effect="dark"
                  @selection-change="handleSelectionChange"
                  style="width: 100%">
              <el-table-column
                      type="selection"
                      width="55">
              </el-table-column>
              <el-table-column
                      prop="createDatetime"
                      label="创建时间"
                      width="150">
              </el-table-column>
              <el-table-column
                      prop="parkingId"
                      label="车库名称"
                      width="150">
              </el-table-column>
              <el-table-column
                      prop="content"
                      label="评论内容"
                      min-width="200">
              </el-table-column>
              <el-table-column
                      label="用户打分"
                      width="200">
                  <template slot-scope="scope">
                      <el-rate v-model="scope.row.score" :disabled="true"></el-rate>
                  </template>
              </el-table-column>
              <el-table-column
                      prop="userId"
                      label="用户名称"
                      min-width="120">
              </el-table-column>
              <el-table-column
                      prop="replay"
                      label="回复内容"
                      min-width="300">
              </el-table-column>
              <el-table-column
                      label="点赞数"
                      width="120">
                  <template slot-scope="scope">
                        <img src="../../assets/like_normal.png" width="50px" height="50px"/>
                        <span>{{scope.row.like}}</span>
                  </template>
              </el-table-column>
              <el-table-column
                      label="反对数"
                      width="120">
                  <template slot-scope="scope">
                      <img src="../../assets/dislike_normal.png" width="50px" height="50px"/>
                      <span>{{scope.row.dislike}}</span>
                  </template>
              </el-table-column>
          </el-table>
          <el-pagination
                  style="margin-top: 10px"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="1"
                  :page-sizes="[100, 200, 300, 400]"
                  :page-size="100"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="400">
          </el-pagination>
      </el-card>
    </div>
</template>

<script>
    import Message from '../../components/messages/index'
    export default {
        name: "New",
        data(){
            return{
                tableHeader:{
                    "background-color":"#7fa1be99",
                    "color":"white",
                    "font-size":"18px"
                },
                commentsList:[
                    {
                        content:"这车库相当不错",
                        score:3,
                        replay:"老铁，常来",
                        userId:2,
                        parkingId:3,
                        like:80,
                        dislike:100
                    },
                    {
                        content:"这车库相当不错",
                        score:3,
                        replay:"老铁，常来",
                        userId:2,
                        parkingId:3,
                        like:80,
                        dislike:100
                    },
                    {
                        content:"这车库相当不错",
                        score:3,
                        replay:"老铁，常来",
                        userId:2,
                        parkingId:3,
                        like:80,
                        dislike:100
                    }
                ],
                commentsData:{},
                selectList:[],
                addVisible:false,
            }
        },
        methods:{
            handleSelectionChange(val){
                this.selectList = [];
                val.forEach(v =>{
                    this.selectList.push(v.id);
                });
            },
            handleCurrentChange(){

            },
            handleSizeChange(){

            },
            replayComment(){
                if (!this.selectList.length > 0){
                    Message.warning("至少需要选择一项!")
                }
            },
            addComment(){
            },
            deleteComment(){
                if (!this.selectList.length > 0){
                    Message.warning("至少需要选择一项!")
                }
            },
            editComment(){
                if (this.selectList.length === 0){
                    Message.warning("至少需要选择一项!")
                }else if (this.selectList.length > 1){
                    Message.warning("只能选择一项!")
                }
            },
            showComment(){
                if (this.selectList.length === 0){
                    Message.warning("至少需要选择一项!")
                }else if (this.selectList.length > 1){
                    Message.warning("只能选择一项!")
                }
            }


        }
    }
</script>

<style scoped lang="less">
    .new{
        width: 100%;
        height: calc(~'100vh - 100px');
    }
</style>
